<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-17 09:50:26
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-03-01 16:33:04
 * @FilePath: \test\src\components\Common\Table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="table-commom-box">
        <!-- 表头 -->
        <van-row class="table-row-title">
            <van-col :span='item.flex' v-for="(item, index) in props.options" :key="index">
                <div v-if="item.name == 'checkbox'">
                    <van-icon name="circle" color="#E8E8E8" size="18" />
                    <!-- <van-icon name="checked" color="#3d7fff" size="18"/> -->
                </div>
                <span v-else>{{ item.name }}</span>
            </van-col>
        </van-row>
        <!-- 列表 -->
        <van-row class="table-body-box" v-for="(item, index) in props.studentsList" :key="index">
            <van-col :span='k.flex' v-for="(k, i) in props.options" :key="'index' + i">
                <div v-if="k.name == 'checkbox'">
                    <van-icon name="circle" color="#E8E8E8" size="18" />
                    <!-- <van-icon name="checked" color="#3d7fff" size="18"/> -->
                </div>
                <span :style="'color:' + k.color">{{ item[k.faild] }}</span>
            </van-col>
        </van-row>
        <!-- 当没有数据时候 -->
        <van-empty v-if="props.studentsList.length == 0" :image="personImg" image-size="150" description="暂无异常名单哦~" />
    </div>
</template>
<script lang="ts" setup>
import personImg from '../../assets/images/ikon_no_record@2x.png'
interface PropsType {
    // 标题名称
    title?: string
    // 是否需要左边的伪类样式，默认需要。不需要传none
    none?: boolean,
    // table的一些基础配置
    options?: any,
    // 返回的列表数据
    studentsList: any
}
const props = withDefaults(defineProps<PropsType>(), {
    title: '', // 默认值
    none: false,
    studentsList: [],
    options: [
        { name: 'checkbox', flex: 4, faild: '', color: '', },
        { name: '姓名', flex: 6, faild: 'user_name', color: '#649FFF', },
        { name: '班级', flex: 14, faild: 'class_name', color: '', }
    ]
})
</script>
<style lang="scss" scoped>
.table-commom-box {
    .table-row-title {
        background: #F8F8F8;
        border-radius: 5px;
        padding: 10px 20px;
    }

    .table-body-box {
        padding: 15px 20px;
        color: #666666;
    }
}
</style>
  